/*
  学习目标：了解- props.children
  特指: 组件标签夹着的内容, 类似vue中的插槽
  特点：🔔children可以穿任意数据

*/

import React from 'react';

export default function App() {
  return (
    <div>
      <Child>123</Child>
      <Child>{123}</Child>
      <Child>{[1, 2, 3]}</Child>
      <Child>
        <h1>我是类似插槽传来的h1</h1>
      </Child>

      <Child2>
        {() => {
          return <h3>hello React</h3>;
        }}
      </Child2>
    </div>
  );
}

function Child2({ children }) {
  return <div>child2 {children()}</div>;
}

function Child({ children }) {
  console.log('children  ----->  ', children);
  return (
    <div>
      <i>child</i>
      {children}
    </div>
  );
}
